<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户信息管理</title>
    <!-- thymeleaf在springboot中静态资源的访问路径不包含 static -->
    <!--引入bootstrap的css样式文件-->
    <link type="text/css" th:href="@{/bootstrap-3.3.7-dist/css/bootstrap.min.css}" rel="stylesheet">
    <!--在bootstrap之前引入jquery-->
    <script type="text/javascript" th:src="@{/jquery-1.12.4/jquery-1.12.4.min.js}"></script>
    <!--引入bootstrap的js脚本-->
    <script type="text/javascript" th:src="@{/bootstrap-3.3.7-dist/js/bootstrap.min.js}"></script>

    <!--引入分页的资源文件（假分页，如果使用真分页，请集成pageHelper）-->
    <!--引入分页插件的css样式文件-->
    <link type="text/css" th:href="@{/pagination-2.1.4/css/pagination.css}" rel="stylesheet">
    <!--引入分页插件的js-->
    <script type="text/javascript" th:src="@{/pagination-2.1.4/js/pagination.min.js}"></script>

    <script type="text/javascript">
        // 使用ajax进行查询操作
        function queryUserInfo() {
            // 进行ajax异步处理
            $.ajax({
                type: "POST", // 等价于form表单的 method属性；指明使用post还是get等操作方式
                url: "queryUserInfoByAjax", // 请求的服务器的uri；等价于form表单的 action属性
                data: $("#userInfoQueryForm").serialize(),// 提交的表单的数据，一般使用 jquery的 .serialize()方法进行序列化处理
                dataType: "json", // 表示后台影响方法返回给前台浏览器的数据流格式
                success: function (data) {// ajax引擎代理对象成功接收服务器端的响应，同时进行回调处理
                    console.log("ajax查询结果集：")
                    console.log(data);
                    console.log("Data Saved: " + JSON.stringify(data));

                    // 遍历ajax获取的json对象，将内容显示到table表格中
                    if (data) {

                        // 使用分页插件，将结果集进行分页处理
                        $('#pager').pagination({
                            dataSource: data, // 被分页的数据源，也就是ajax查询的结果集
                            pageSize: 1, // 定义每页显示的记录条数
                            showGoInput: true,
                            showGoButton: true,
                            callback: function (pagedata, pagination) { // 进行分页显示数据的回调处理
                                // template method of yourself
                                // 拼接要显示的html内容
                                var strShowMe = "";
                                // 清空要显示的表格内容
                                $("#tbShowMe").html("");
                                // 使用each函数遍历json对象，并进行显示
                                $.each(pagedata, function (index, eachVal) {
                                    // data参数表示的each函数遍历的结果集；eachVal就是当前遍历的每个元素对象；index就是当前遍历的元素对象在数据集中的下标索引
                                    strShowMe += "<tr>";
                                    strShowMe += "<th scope=\"row\">";
                                    strShowMe += (index + 1);
                                    strShowMe += "</th>";
                                    strShowMe += "<td>";
                                    strShowMe += eachVal.username;
                                    strShowMe += "</td>";
                                    strShowMe += "<td>";
                                    strShowMe += eachVal.useremail;
                                    strShowMe += "</td>";
                                    strShowMe += "<td>";
                                    strShowMe += eachVal.userage;
                                    strShowMe += "</td>";
                                    strShowMe += "<td>";
                                    strShowMe += eachVal.useraddress;
                                    strShowMe += "</td>";
                                    strShowMe += "</tr>";
                                });
                                console.log("表格显示内容：")
                                console.log(strShowMe);
                                // 将要显示的拼接的html内容放入指定的dom对象中
                                $("#tbShowMe").html(strShowMe);
                            }
                        })
                    }
                },
                error: function () {
                    console.log("执行查询出现问题")
                }
            });
        }


    </script>


</head>
<body>
<div id="divqueryform">

    <form class="form-horizontal" id="userInfoQueryForm">
        <div class="form-group">
        </div>

        <div class="form-group">
            <label for="username" class="col-sm-2 control-label">用户名</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名">
            </div>
            <label for="useremail" class="col-sm-2 control-label">邮箱</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="useremail" name="useremail" placeholder="请输入邮箱">
            </div>
        </div>


        <div class="form-group">
            <label for="userage" class="col-sm-2 control-label">年龄</label>
            <div class="col-sm-4">
                <div class="col-sm-6">
                    <input type="text" class="form-control" id="userage" name="userage" placeholder="请输入开始年龄">
                </div>
                <div class="col-sm-6">
                    <input type="text" class="form-control" id="userage2" name="userage2" placeholder="请输入结束年龄">
                </div>
            </div>
            <label for="useraddress" class="col-sm-2 control-label">地址</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="useraddress" name="useraddress" placeholder="请输入地址">
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="button" class="btn btn-default" onclick="queryUserInfo()">查询</button>
            </div>
        </div>
    </form>
</div>
<div class="bs-example" data-example-id="hoverable-table">
    <table class="table table-hover">
        <thead>
        <tr>
            <th>序号</th>
            <th>用户名</th>
            <th>邮箱</th>
            <th>年龄</th>
            <th>地址</th>
        </tr>
        </thead>
        <tbody id="tbShowMe">

        </tbody>
    </table>
    <!--使用分页插件-->
    <div id="pager"></div>
</div>
</body>
</html>